#hash {
    margin-bottom: 100px;
  }
  .deatil-box{
      display: flex;
      flex-direction: column;
  }
  .detail {
    width: 800px;
    margin: 0 auto;
    .title {
      font-size: 30px;
      padding: 130px 0 22px;
      color: #333;
    }
    .time{
      color: #f8af12;
    }
    .status {
      color: #6a737d;
      position: relative;
      line-height: 22px;
      &::before {
        content: "";
        width: 100%;
        height: 1px;
        background: #eaeaeaa6;
        position: absolute;
        left: 0;
        bottom: -30px;
      }
      span {
        font-size: 13px;
        margin-right: 10px;
      }
    }
    .content {
      padding-top: 100px;
      font-size: 14px;
    }
    .comment{
      .comment-person{
        height: 50px;
        .left,.right{
          display: flex;
          align-items: center;
        }
        .avatar{
          border-radius: 50%;
          width: 40px;
          height: 40px;
          margin: 12px;
          img{
            border-radius: 50%;
          }
        }
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .name{
        color: #a8b129;
        font-size: 14px;
        span{
          &:nth-child(2){
            margin:0 6px;
            color: #333;
          }
         &:last-child{
            font-size: 12px;
            color: #999;
          }
        }
      }
      .right{
        .response{
          font-size: 14px;
          &:hover{
            color: #0f87e9;
            
          }
        }
      }
      .time{
        margin-left: 6px;
        font-size: 14px;
        color: #6a737d;
      }
      .commentContent{
        padding-left: 12px;
        letter-spacing: 1px;
      }
    }
    .remark{
      width: 100%;
      height: 300px;
      border: 1px solid #6a737d;
        .ant-input-affix-wrapper{
          height: 200px;
        }
      
      .remark-bar{
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 12px;
        padding: 0 12px;
        img{
          width: 20px;
          height: 20px;
        }
      }
    }
    .page-box{
      display: flex;
      justify-content: space-between;
      margin-bottom: 6px;
      align-items: center;
      .pre-page,.next-page{
        width: 45%;
        display: flex;
        cursor: pointer;
        .article-title{
          display: inline-block;
          width: calc(100% - 70px);
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          &:hover{
            color: #eb7350;
          }
        }
      }
      .next-page{
        text-align: right;
      }
    }
  }
  
  @media screen and (max-width: 800px) {
    .detail {
      width: 90%;
      .content {
        padding-top: 30px;
        width: 100%;
      }
    }
  }
  @media screen and (max-width: 600px) {
    .remark{
      width: 95% !important;
      margin: 0 auto;
    }
    .detail {
      .content {
        padding-top: 30px;
        width: 100%;
      }
      .title {
        font-size: 26px;
        padding-top: 88px;
      }
      .status {
        span {
          font-size: 12px;
        }
      }
    }
  }

  .emoji{
    .emoji-list-box{
      padding: 4px;
      width: 210px;
      height: 200px;
      border: 1px solid #ddd;
      display: flex;
      flex-wrap: wrap;
      background-color: #fff;
      position: relative;
      z-index: 10;
      overflow-y: scroll;
      .emoji-item{
        width: 36px;
        height: 36px;
        display: flex;
        border: 1px solid #ddd;
        justify-content: center;
        align-items: center;
        &:hover{
          border-color: #eb7350;
          background-color: #fff9ec;
        }
      }
    }
  }